<template>
  <div class="app-container">
    <el-form :model="selectForm" ref="queryForm" :inline="true">
      <el-form-item label="所属公司">
        <treeselect style="width: 199px;height: 32px" v-model="selectForm.deptId" :options="company"
                    placeholder="请选择所属公司"/>
      </el-form-item>
      <el-form-item label="领用单号">
        <el-input
          v-model="selectForm.receiveCode"
          placeholder="请输入领用单号"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="设备编号">
        <el-input
          v-model="selectForm.deviceCode"
          placeholder="请输入设备编号"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="设备名称">
        <el-input
          v-model="selectForm.deviceName"
          placeholder="请输入设备名称"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="领用人">
        <el-input
          v-model="selectForm.receiveUserName"
          placeholder="请输入申请人"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="经手人">
        <el-input
          v-model="selectForm.receiveOperateUserName"
          placeholder="请输入申请人"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>

      <el-form-item label="是否归还">
        <el-select v-model="selectForm.isReturn" placeholder="请选择">
          <el-option
            v-for="item in [{id:'1',name:'已归还'},{id:'2',name:'未归还'},{id:'3',name:'过期未归还'},]"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="领用时间">
        <el-date-picker
          v-model="selectDate"
          size="small"
          @change="timechange(selectDate)"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list" stripe>
      <el-table-column align="center" type="index" label="序号" width="55"/>
      <el-table-column align="center" label="领用单号" property="receiveCode" width="150">
        <template slot-scope="scope">
          <span style="color: #2196F3;cursor: pointer" @click="details(scope.row)">{{scope.row.receiveCode}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="领用人" property="receiveUserName"></el-table-column>
      <el-table-column align="center" label="领用经手人" property="receiveOperateUserName"></el-table-column>
      <el-table-column align="center" label="归还经手人" property="returnOperateUserName"></el-table-column>
      <el-table-column align="center" label="设备编号" property="deviceCode"></el-table-column>
      <el-table-column align="center" label="领用设备" property="deviceName"></el-table-column>
      <el-table-column align="center" label="领用时间 " property="receiveDate" width="150" ></el-table-column>
      <el-table-column align="center" label="预计归还时间 " property="expectReturnDate" width="150" > </el-table-column>
      <el-table-column align="center" label="归还时间 " property="realReturnDate"  width="150" >
        <template slot-scope="scope">
          {{scope.row.realReturnDate?parseTime(scope.row.realReturnDate):'暂未归还' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注" property="remark" :show-overflow-tooltip="true"/>
      <el-table-column
        label="操作"
        align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.isReturn==2" size="mini" type="primary" icon="el-icon-edit"
                     @click="retuBtn(scope.row)">归还
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :total="total"
      :page.sync="selectForm.pageNum"
      :limit.sync="selectForm.pageSize"
      @pagination="getList"
    />
    <el-dialog title="归还" :visible.sync="editVisible" width="600px" >
      <el-form ref="editForm" :model="editForm" label-width="120px">
        <el-form-item label="领用人：">
          <el-input v-model="editForm.receiveUserName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="设备名称：">
          <el-input v-model="editForm.deviceName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="设备编号：">
          <el-input v-model="editForm.receiveCode" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="领用时间：">
          <el-input v-model="editForm.receiveDate" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="预计归还时间：">
          <el-input v-model="editForm.expectReturnDate" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="归还时间：" >
          <el-date-picker
            v-model="editForm.realReturnDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="经手人：">
          <el-input v-model="editForm.receiveOperateUserName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="备注信息：">
          <el-input v-model="editForm.remark" type="textarea" :rows="3" placeholder="请输入备注信息"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="returnSumbit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import {treeselect} from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  export default {
    components: {
      Treeselect,
    },
    name: "recipientsSubsidiary.vue",
    data() {
      return {
        selectForm: {
          pageNum: 1,
          pageSize: 10,
          companyId: undefined,
          receiveCode: '',//报废单号
          deviceName: '',
          deviceCode: '',
          recipient: '',//领用人
          handle: '',//经手人
          isReturn: '',
        },
        company: [],
        selectDate: '',
        loading: false,
        total: 2,
        list: [
          {
            receiveCode: 'MZ20200520',
            recipient: '管理人',
            recipientHandle: '张三',
            returnHandle: '李四',
            deviceCode: '11',
            recipientDevice: '测试',
            receiveDate: '2020-06-02',
            expectedReturnDate: '2020-06-02',
            returnDate: '',
            remark: '备注',
          }, {
            receiveCode: 'MZ20200520',
            recipient: '管理人',
            recipientHandle: '张三',
            returnHandle: '李四',
            deviceCode: '11',
            recipientDevice: '测试',
            receiveDate: '2020-06-02',
            expectedReturnDate: '2020-06-02',
            returnDate: '2020-06-02',
            remark: '备注',
          }],
        editForm: {
          recipient: '',
          deviceName: '',
          receiveCode: '',
          receiveDate: '',
          expectedReturnDate: '',
          returnDate: '',
          handle:'',
          remark: '',
        },
        editVisible: false,
      }
    },
    created() {
      this.getTree()
      this.getList()
    },
    methods: {
      timechange:function(row){
        this.selectForm.beginReceiveDate = row[0]
        this.selectForm.endReceiveDate = row[1]
      },
      //所属部门下拉
      getTree() {
        treeselect().then(response => {
          this.company = response.data;
        });
      },
      getList() {
        this.loading = true;
        request({
          url: '/device-receive-api/detailList',
          method: 'get',
          params:this.selectForm
        }).then(response => {
          this.loading = false;
          this.list = response.rows
          this.total = response.total
        });
      },
      retuBtn(row) {
        this.editForm = row;
        this.editVisible = true;
      },
      returnSumbit(){
        if(!this.editForm.realReturnDate){
          this.$message({
            type: 'error',
            message: '归还时间不能为空！'
          });
          return
        }
        request({
          url: '/device-receive-api/giveBack',
          method:'put',
          data:{
            id:this.editForm.id,
            receiveDateilId:this.editForm.receiveDateilId,
            realReturnDate:this.editForm.realReturnDate,
            remark:this.editForm.remark,
            deviceId:this.editForm.deviceId
          },
        }).then(response => {
          if(response.code==200){
            this.$message.success('归还成功')
            this.getList()
          }

          this.editVisible = false;
        });


      },
      details(row) {
        this.$router.push({path: '/equipmentCZ/recipientsSubsidiaryDetail', query: {data: row}});
      },
    }
  }
</script>

<style scoped>
</style>
